<!-- 新增收货地址 -->
<template>
  <div class="add-address">
    <van-nav-bar fixed title="修改收货地址" safe-area-inset-top>
      <template #left>
        <img style="width: 30px; margin-right: 10px" src="../../assets/images/返回2.png" @click="() => $router.go(-1)"
          alt="" />
        <img style="width: 30px" @click="() => $router.push({ path: '/' })" src="../../assets/images/返回首页.png" alt="" />
      </template>
    </van-nav-bar>
    <!--  -->
    <!-- <div class="totip">
      <span>＊</span>
      <span>一个手机号只能绑定一个账号</span>
    </div> -->
    <van-form label-width="1.5rem" ref="form">
      <van-field center v-model="form.name" name="姓名" label="姓名" placeholder="请输入姓名" autocomplete="off"
        :rules="[{ required: true, message: '' }]" />
      <van-field center v-model="form.phone" type="tel" name="电话号码" label="电话号码" placeholder="请输入电话号码"
        autocomplete="off" :rules="[{ required: true, message: '' }]" />
      <van-field center readonly clickable name="area" :value="form.address" label="地区选择" placeholder="点击选择省市区"
        autocomplete="off" @click="showAddress = true" :rules="[{ required: true, message: '' }]" />
      <van-field center v-model="form.detail" type="tel" name="具体位置" label="具体位置" placeholder="请输入具体位置"
        autocomplete="off" :rules="[{ required: true, message: '' }]" />
      <van-popup v-model="showAddress" position="bottom">
        <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showAddress = false" />
      </van-popup>
      <div class="default">
        <span>默认收货地址</span>
        <van-switch size=".5rem" v-model="form.ischeck" />
      </div>
    </van-form>
    <div class="btn">
      <van-button color="rgb(92,155,246)" style="width: 50%; border-radius: 15px; font-size: 0.45rem" @click="add"
        type="info">确定
      </van-button>
      <van-button  @click="() => $router.go(-1)" style="width: 50%; border-radius: 15px; font-size: 0.45rem;margin-top:0.3rem;" type="default">取消
      </van-button>
    </div>
  </div>
</template>

<script>
import Bus from '../../utils/bus.js'
import { addressEdit, addressInfo } from "../../api/useraddress";
import { areaList } from "@vant/area-data";
export default {
  name: "",
  data() {
    return {
      areaList,
      showAddress: false,
      form: {
        name: "",
        phone: "",
        address: "",
        detail: "",
        ischeck: false,
      },
    };
  },
  methods: {
    async getInfo() {
      let res = await addressInfo({ id: this.$route.query.id, userid: localStorage.getItem("userid") });
      if (res.status == 200) {
        this.form = res.data;
        this.form.address = res.data.province + " " + res.data.city + " " + res.data.region;
        if (res.data.ischeck == "1") {
          this.form.ischeck = true;
        } else {
          this.form.ischeck = false;
        }


      }
    },
    async add() {

      this.$refs.form
        .validate(["姓名", "电话号码", "area"])

        .then(async () => {

          console.log("ok", this.form);
          this.form.userid = localStorage.getItem("userid");

          var address = this.form.address.split(" ");

          this.form.province = address[0];
          this.form.city = address[0];
          this.form.region = address[0];

          if (this.form.ischeck) {
            this.form.ischeck = 1;
          } else {
            this.form.ischeck = 0;
          }

          let res = await addressEdit(this.form);
          if (res.status == 200) {
            Bus.$emit('address', "success")
            this.$toast(res.message);
            this.$router.back();
          } else {
            this.$toast(res.message);
          }

        })
        .catch(() => {
          // 验证不通过
        });


    },
    onConfirm(values) {
      this.form.address = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join(" ");
      this.showAddress = false;
      console.log(this.form);
    },
  },
  computed: {},
  watch: {},
  created() {

    this.getInfo();
  },
  mounted() { },
};
</script>

<style lang="scss" scoped>
:deep(.van-field__body input) {
  background-color: rgb(245, 249, 254);
  padding: 10px;
}

.add-address {
  width: 100%;
  padding-top: 92px;

  .totip {
    padding: 20px 30px;
    font-size: 30px;
    color: #ccc;
    display: flex;

    > :first-child {
      font-size: 40px;
      color: red;
      margin-right: 10px;
    }
  }

  .default {
    display: flex;
    justify-content: space-between;
    padding: 100px 30px 20px;
    font-size: 28px;
    background-color: #fff;
    align-items: center;
  }

  .btn {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    position: fixed;
    bottom: 10%;
  }
}
</style>